<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <!-- <link rel="stylesheet" href="stylesheets/reset.css"> -->
  <link rel="stylesheet" href="stylesheets/index.css">
</head>
<body>

<div id="app">
	<h1>{{ msg }}</h1>
	<div>
		<input type="text" v-model="wd">
		<button @click="handleSearch">搜索</button>
	</div>
	<ol>
		<li v-for="item of songs">
			<span>
				{{ item.name }}-
				<i v-for="art of item.artists">
					{{ art.name }}
				</i>
			</span>
			<button v-if="activeMusicId !== item.id" v-on:click="playMusic(item.id)">播放▶️</button>
			<b v-if="activeMusicId === item.id">ing</b>
			<!-- 
			<button v-on:click="playMusic(item.id)">
				{{ activeMusicId === item.id ? "暂停⏸" : "播放▶️" }}
			️</button> -->
			
		</li>
	</ol>
	<audio autoplay :src="musicUrl" controls></audio>
	<div v-if="isLoading" class="loading">
		<svg t="1644393146478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2041" width="50" height="50"><path d="M204.8 204.8m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#EBF2FC" p-id="2042"></path><path d="M819.2 204.8m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#B5D2F3" p-id="2043"></path><path d="M819.2 819.2m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#7FB0EA" p-id="2044"></path><path d="M204.8 819.2m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#4A90E2" p-id="2045"></path></svg>
	</div>
</div>

<script src="./vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
